<template>
  <div>
    <van-nav-bar title="济南黑马程序员实战项目" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <div class="box">
          <div v-for="item in goodsList" :key="item.id">
            <div class="goods_box">
              <div class="img_box">
                <img :src="item.img_url" v-lazy="item.img_url" alt />
              </div>
              <p>{{item.zhaiyao}}</p>
              <div class="details">
                <div class="price">
                  <span>￥{{item.sell_price}}</span>
                  <s>￥{{item.market_price}}</s>
                </div>
                <div class="stock">
                  <span class="best_Sellers">热卖中</span>
                  <span>剩{{item.stock_quantity}}件</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-pull-refresh>
    </van-list>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 商品列表数据
      goodsList: [],
      // 页码
      number: 1,
      // 商品图片
      imageList: [],
      loading: false,
      finished: false,
      refreshing: false
    }
  },
  created() {
    // 获取商品列表
    this.getGoodsList()
  },
  methods: {
    // 返回首页
    onClickLeft() {
      this.$router.go(-1)
    },
    // 获取商品列表
    async getGoodsList() {
      const res = await this.$http.get('/api/getgoods?pageindex=' + this.number)
      // console.log(res)

      this.$message.success('获取商品列表成功')
      this.goodsList = res
      //   console.log(this.goodsList)
      res.forEach(item => {
        this.imageList.push(item.img_url)
      })
      //   console.log(this.imageList)
    },
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.goodsList = []
          this.refreshing = false
        }

        this.getGoodsList()
        this.loading = false

        if (this.goodsList.length >= 10) {
          this.finished = true
        }
      }, 1000)
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    }
  }
}
</script>
<style lang="less" scoped>
.van-nav-bar__text {
  color: #fff;
}
.van-nav-bar .van-icon {
  color: #fff;
}
.box {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 0;
  padding: 0 10px;
}

.goods_box {
  width: 160px;
  border: 1px solid #ccc;
  margin: 10px 0;
  align-content: space-between;
  padding: 10px;
  margin: 10px 0;
  min-height: 180px;
}
.img_box img {
  width: 100%;
}
.goods_box p {
  font-size: 12px;
}
.details {
  background-color: #eeeeee;
}
.price span {
  color: red;
  font-size: 16px;
  margin-right: 10px;
}
.price s {
  text-decoration: line-through;
  font-size: 14px;
}
.stock {
  margin-top: 10px;
}
.stock span {
  font-size: 12px;
}
.best_Sellers {
  margin-right: 70px;
}

.van-list__finished-text {
  line-height: 200px !important;
}
</style>
